---
id: unit4
title: SourceMap
---

我们使用构建工具产生的文件是压缩混淆的，那么这样的代码一旦报错，定位问题就会变得很麻烦，我们在这里就利用 sourceMap 功能解决这个问题。

使用 SourceMapDevToolPlugin 进行更细粒度的配置。查看 source-map-loader 来处理已有的 source map

```js
module.exports = {
  entry: "index.js",
  devtool: "nosources-source-map", // SourceMap配置
  output: {
    path: path.resolve(__dirname, "./dist"),
    filename: "index_bundle.js",
  },
};
```

### divtool 内置值

| divtool 值                     | 构建速度 | 重新构建速度 | 生产环境 | 品质                   |
| ------------------------------ | :------: | :----------: | :------: | ---------------------- |
| (none)                         |   +++    |     +++      |   yes    | 打包后的代码           |
| eval                           |   +++    |     +++      |    no    | 生成后的代码           |
| cheap-eval-source-map          |    +     |      ++      |    no    | 转换过的代码（仅限行） |
| cheap-module-eval-source-map   |    o     |      ++      |    no    | 原始源代码（仅限行）   |
| eval-source-map                |    --    |      +       |    no    | 原始源代码             |
| cheap-source-map               |    +     |      o       |   yes    | 转换过的代码（仅限行） |
| cheap-module-source-map        |    o     |      -       |   yes    | 原始源代码（仅限行）   |
| inline-cheap-source-map        |    +     |      o       |    no    | 转换过的代码（仅限行） |
| inline-cheap-module-source-map |    o     |      -       |    no    | 原始源代码（仅限行）   |
| source-map                     |    --    |      --      |   yes    | 原始源代码             |
| inline-source-map              |    --    |      --      |    no    | 原始源代码             |
| hidden-source-map              |    --    |      --      |   yes    | 原始源代码             |
| nosources-source-map           |    --    |      --      |   yes    | 无源代码内容           |

| 关键字 |                                      含义                                      |
| ---------- | :--------------------------------------------------------------------------------: |
| source-map |                                   产生.map 文件                                    |
| eval       |                               使用 eval 包裹模块代码                               |
| cheap      |    不包含列信息（关于列信息的解释下面会有详细介绍)也不包含 loader 的 sourcemap     |
| module     | 包含 loader 的 sourcemap（比如 jsx to js ，babel 的 sourcemap）,否则无法定义源文件 |
| inline     |                   将.map 作为 DataURI 嵌入，不单独生成.map 文件                    |

:::info
+++ 非常快速, ++ 快速, + 比较快, o 中等, - 比较慢, -- 慢  

:::
